<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Accordion</title>
	<link rel="stylesheet" href="./css/bootstrap-grid.min.css">
	<link rel="stylesheet" href="./css/style.css">
	<script defer src="./js/script.js"></script>
</head>
<body>
<header class="header__container">
	<div class="container">
		<nav class="header-nav">
			<a class="logo__link" href="#"><img src="images/logo.svg" alt="логотип" class="logo"></a>
			<ul class="nav-list">
				<li class="nav-item">
					<a class="nav-link" href="index.html">О нас</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Туры</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Скидки</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Билеты</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="yandex-map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
	<div class="header-nav__mobile_container">
		<div class="burger">
			<span></span>
		</div>
		<nav class="header-nav__mobile">
			<ul class="nav-list__mobile">
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="index.html">О нас</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="services.html">Туры</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="#">Скидки</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="#">Билеты</a>
				</li>
				<li class="nav-item__mobile">
					<a class="nav-link__mobile" href="yandex-map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
</header>
<main class="main">
	<section class="services__container">
		<div class="container">
			<h3 class="services__title">Выберите машрут для путешествия.</h3>
			<p class="services__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolore explicabo magnam maiores neque nisi quaerat. Aperiam dignissimos enim excepturi sapiente sint! Accusamus ducimus <img class="about-us__tooltip" src="./icons/tooltip-white.svg" alt="посказка" data-tooltip="Подсказка по тексту."> eligendi itaque magnam sit! Architecto cupiditate ducimus, enim esse est id illo, iure magni maxime minus odio quae quaerat sequi vero voluptatum. <img class="about-us__tooltip" src="./icons/tooltip-white.svg" alt="посказка" data-tooltip="Подсказка по тексту."> Accusantium expedita itaque nisi.</p>
			<div class="row">
				<div class="col-10 accordion">
					<div data-tab="tab-1" class="accordion__title">
						<h3>Путешествия / Маршруты</h3>
						<span></span>
					</div>
					<div id="tab-1" class="accordion__content">
						<img class="acc-image" src="./images/marshruty.jpg" alt="Маршруты путешествий">
						<p class="accordion__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum debitis et ipsa provident qui quidem reiciendis unde ut voluptates? Facere ipsam minus ullam? Voluptatem.</p>
						<a class="accordion__link" href="#" aria-label="кнопка выбрать тур">Выбрать тур</a>
					</div>
				</div>
				
				<div class="col-10 accordion">
					<div data-tab="tab-2" class="accordion__title">
						<h3>Заказать билеты</h3>
						<span></span>
					</div>
					<div id="tab-2" class="accordion__content">
						<img class="acc-image" src="./images/order-of-tikets.webp" alt="заказ билетов">
						<p class="accordion__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum debitis et ipsa provident qui quidem reiciendis unde ut voluptates? Facere ipsam minus ullam? Voluptatem.</p>
						<a class="accordion__link" href="#" aria-label="кнопка заказать билеты">Заказать билеты</a>
					</div>
				</div>
				
				<div class="col-10 accordion">
					<div data-tab="tab-3" class="accordion__title">
						<h3>Каршеринг</h3>
						<span></span>
					</div>
					<div id="tab-3" class="accordion__content">
						<img class="acc-image" src="./images/order-of-cars.jpeg" alt="каршеринг">
						<p class="accordion__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum debitis et ipsa provident qui quidem reiciendis unde ut voluptates? Facere ipsam minus ullam? Voluptatem.</p>
						<a class="accordion__link" href="#" aria-label="кнопка заказать авто">Заказать авто</a>
					</div>
				</div>
				
				<div class="col-10 accordion">
					<div data-tab="tab-4" class="accordion__title">
						<h3>Отели</h3>
						<span></span>
					</div>
					<div id="tab-4" class="accordion__content">
						<img class="acc-image" src="./images/hotels.jpeg" alt="гостинницы">
						<p class="accordion__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum debitis et ipsa provident qui quidem reiciendis unde ut voluptates? Facere ipsam minus ullam? Voluptatem.</p>
						<a class="accordion__link" href="#" aria-label="кнопка забронировать отель">Забронировать отель</a>
					</div>
				</div>
				
				<div class="col-10 accordion">
					<div data-tab="tab-5" class="accordion__title">
						<h3>Экскурсии</h3>
						<span></span>
					</div>
					<div id="tab-5" class="accordion__content">
						<img class="acc-image" src="./images/excurs.jpeg" alt="экскурсии">
						<p class="accordion__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum debitis et ipsa provident qui quidem reiciendis unde ut voluptates? Facere ipsam minus ullam? Voluptatem.</p>
						<a class="accordion__link" href="#" aria-label="кнопка выбрать экскерсии">Выбрать экскурсии</a>
					</div>
				</div>
			</div>
		</div>
	</section>
</main>
<footer class="footer__container">
	<div class="container">
		<nav class="footer-nav">
			<a class="logo__link" href="#"><img src="images/logo.svg" alt="логотип" class="logo"></a>
			<ul class="footer-list">
				<li class="footer-item">
					<a class="footer-link" href="index.html">О нас</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="services.html">Туры</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="#">Скидки</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="#">Билеты</a>
				</li>
				<li class="nav-item">
					<a class="footer-link" href="yandex-map.html">Связатья с нами</a>
				</li>
			</ul>
		</nav>
	</div>
</footer>
</body>
</html>